<template>
  <div class="address_modal">
    <a type="primary" @click="showModal"> 新增收货地址 </a>
    <a-modal v-model="visible" title="收货地址">
      <div class="form">
        <div>
          <a-input value="中国" disabled />
        </div>
        <div>
          <a-input v-model="name" @blur="checkName" placeholder="姓名" />
          <span class="tip">{{ nameTip }}</span>
        </div>
        <div>
          <a-input v-model="phone" @blur="checkPhone" placeholder="手机号" />
          <span class="tip">{{ phoneTip }}</span>
        </div>
        <div class="cascader">
          <a-cascader
            :options="options"
            v-model="address"
            placeholder="地址"
            @blur="checkAddress"
            
          >
          </a-cascader>
          <span class="addressTip">{{ addressTip }}</span>
        </div>
        <div>
          <a-input
            v-model="detail"
            @blur="checkDetail"
            placeholder="详细地址"
          />
          <span class="tip">{{ detailTip }}</span>
        </div>
        <a-checkbox @click="setDefault()">设为默认</a-checkbox>
      </div>
      <template slot="footer">
        <a-button key="back" @click="handleCancel"> 取消 </a-button>
        <a-button
          key="submit"
          type="primary"
          @click="handleOk({name:name,phone:phone,area:getArea,area_name:getCityname,desc:detail})"
        >
          保存
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
import {
  getCity,
  addAddress,
  setDefaultAddress,
} from "../assets/js/request.js";
import {mapState,mapActions} from 'vuex'

let nameReg = /^[\u4E00-\u9FA5A-Za-z0-9]{2,20}$/;
let phoneReg = /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/;
export default {
  data() {
    return {
      visible: false,
      name: "",
      phone: "",
      address: [],
      detail: "",
      nameTip: "",
      phoneTip: "",
      addressTip: "",
      detailTip: "",
      options: [],
      //   area: `${this.address[0]},${this.address[1]},${this.address[2]}`,
      cityName:'',
    };
  },
  components: {
    // addAddress,
  },
  computed: {
    getCityname() {
    //   if (this.address.lenght>0) {
        let a = this.options.find((ele) => ele.id === this.address[0]);
        let b = a.children.find((ele) => ele.id === this.address[1]);
        let c = b.children.find((ele) => ele.id === this.address[2]);
        console.log(a);
        console.log(b);
        console.log(c);
        let cityName = a.cityname + "省" + b.cityname + "市" + c.cityname;
        console.log(cityName);
        this.cityName = cityName;
        console.log(this.cityName);
        return this.cityName;
    //   }
    },
    getArea() {
      return `${this.address[0]},${this.address[1]},${this.address[2]}`;
    },
  },
  methods: {
    ...mapActions('address',['getAddress']),
    showModal() {
      this.visible = true;
    },
    async handleOk(data) {
        console.log(data);
        let address = await addAddress(data);
        console.log(address);
        this.getAddress()
        this.visible = false;
    },
    handleCancel(e) {
      this.visible = false;
    },
    checkName() {
      if (this.name === "") {
        this.nameTip = "姓名必填";
      } else if (!nameReg.test(this.name)) {
        this.nameTip = "姓名格式不对";
      } else {
        this.nameTip = "";
      }
    },
    checkPhone() {
      if (this.phone === "") {
        this.phoneTip = "手机号必填";
      } else if (!phoneReg.test(this.phone)) {
        this.phoneTip = "手机号格式不对";
      } else {
        this.phoneTip = "";
      }
    },
    checkAddress() {
      if (this.address.length === 0) {
        this.addressTip = "地址必填";
      } else {
        this.addressTip = "";
      }
    },
    checkDetail() {
      if (this.detail === "") {
        this.detailTip = "详细地址必填";
      } else {
        this.detailTip = "";
      }
    },
    async setDefault(id) {
      await setDefaultAddress(id)
    },
  },
  async created() {
    let city = await getCity();
    console.log(city);
    this.options = city;
  },
};
</script>

<style lang="scss">
.address_modal {
  a {
    font-size: 13px;
    color: #44a8f2;
    line-height: 24px;
  }
  .form {
    div {
      margin: 0 0 36px;
      position: relative;
      .ant-input {
        height: 44px;
        color: black;
      }
      .tip {
        color: red;
        position: absolute;
        top: 44px;
        left: 0;
      }
    }
    div:first-of-type {
      margin: 0 0 24px;
    }
    .cascader {
      position: relative;
      .ant-cascader-picker {
        width: 100%;
        position: static;
        .ant-cascader-input {
          height: 44px;
          width: 100%;
          background-color: yellow;
        }
      }
      .addressTip {
        color: red;
        position: absolute;
        top: 44px;
        left: 0;
      }
    }
  }
}
</style>